<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>收集笑脸</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
        background: rgb(157, 206, 83);
      }
      h1 {
        text-align: center;
      }
      div {
        width: 100px;
        height: 70px;
        border: 2px inset gray;
      }
      p {
        text-align: center;
        font: 50px/50px "黑体";
      }
    </style>
  </head>
  <body>
    <h1>点击消消乐</h1>
    <div>
      ⚡分数⚡
      <p></p>
    </div>
  </body>
  <script>
    //随机出现笑脸
    /*
      1 定时器
      2 在定时器函数中
    */
    setInterval(function() {
      //2.1 造星星
      var imgObj = document.createElement("img");
      imgObj.src = "./img/3.gif";
      //2.2 随机笑脸大小
      var max = 200;
      var min = 20;
      imgObj.width = Math.floor(Math.random() * (max - min + 1) + min);
      //2.3 定位随机范围
      imgObj.style.position = "absolute";
      var min = 0;
      var max =
        (window.innerWidth || document.documentElement.clientWidth) -
        imgObj.width;
      imgObj.style.left =
        Math.floor(Math.random() * (max - min + 1) + min) + "px";
      var max =
        (window.innerHeight || document.documentElement.clientHeight) -
        imgObj.height;
      imgObj.style.top =
        Math.floor(Math.random() * (max - min + 1) + min) + "px";
      //2.4 追加到页面
      document.body.appendChild(imgObj);

      //获取p标签，存入分数
      //点击到图片，num++
      // var num = parseInt(document.querySelector("p").innerText);

      /* var num = 0;
      imgObj.onclick = function(num) {
        num++;
        document.querySelector("p").innerText = num;
        console.log(document.querySelector("p").innerHTML);
        console.log(num);
      }; */
    }, 1500);

    //删除笑脸
    var bodyObj = document.body;
    var num = 0;
    bodyObj.onclick = function(evt) {
      var e = evt || window.event;
      // console.log(e);

      var target = e.target || e.srcElement;
      // console.log(target);

      if (target.nodeName === "IMG") {
        bodyObj.removeChild(target);
        num++;
      }
      document.querySelector("p").innerText = num;
    };
  </script>
</html>
